<script setup>
const localePath = useLocalePath()
const route = useRoute()

const props = defineProps({
    currentPage: { type: Number, required: true },
    totalPages: { type: Number, required: true },
    baseUrl: { type: String, default: () => 'party/news' }
})

// 生成带语言前缀的路径
const localizedBaseUrl = computed(() => localePath(props.baseUrl))

const inputPage = ref('')

const displayedPages = computed(() => {
    const current = props.currentPage
    const total = props.totalPages
    const delta = 2
    const range = []

    // 添加首页
    range.push(1)

    // 左省略号逻辑
    if (current - delta > 2) {
        range.push('...')
    }

    // 中间页码
    let start = Math.max(2, current - delta)
    let end = Math.min(total - 1, current + delta)

    // 右边界补偿
    if (current + delta >= total - 1) {
        start = Math.max(2, total - delta * 2)
    }

    // 左边界补偿
    if (current - delta <= 2) {
        end = Math.min(delta * 2 + 1, total - 1)
    }

    for (let i = start; i <= end; i++) {
        range.push(i)
    }

    // 右省略号逻辑
    if (current + delta < total - 1) {
        range.push('...')
    }

    // 添加末页
    if (total > 1) {
        range.push(total)
    }

    return range.filter((item, index, arr) => {
        // 过滤重复的省略号
        return !(item === '...' && arr[index - 1] === '...')
    })
})
const gotoPage = () => {
    const page = Math.max(1, Math.min(inputPage.value, props.totalPages))
    if (page && page !== props.currentPage) {
        navigateTo({
            path: localizedBaseUrl.value,
            query: {
                ...(route?.query || {}),
                page: page
            }
        })
    }
    inputPage.value = ''
}
</script>


<template>
    <div class="gov-pagination">
        <ul class="pagination">
            <!-- 上一页 -->
            <li>
                <NuxtLink :to="{
                    path: localizedBaseUrl,
                    query: { ...(route?.query || {}), page: currentPage != 1 ? currentPage - 1 : 1 }
                }" class="page-link" :class="{ disabled: currentPage === 1 }" aria-label="上一页">
                    &lt;
                </NuxtLink>
            </li>

            <!-- 页码 -->
            <li v-for="(page, index) in displayedPages" :key="index">
                <template v-if="page === '...'">
                    <span class="ellipsis">...</span>
                </template>
                <NuxtLink v-else :to="{ path: localizedBaseUrl, query: { ...(route?.query || {}), page: page } }"
                    class="page-link" :class="{ active: page === currentPage }" :aria-label="`第 ${page} 页`">
                    {{ page }}
                </NuxtLink>
            </li>

            <!-- 下一页 -->
            <li>
                <NuxtLink :to="{
                    path: localizedBaseUrl,
                    query: { ...(route?.query || {}), page: currentPage < totalPages ? currentPage + 1 : totalPages }
                }" class="page-link" :class="{ disabled: currentPage === totalPages }" aria-label="下一页">
                    &gt;
                </NuxtLink>
            </li>

            <!-- 跳转 -->
            <li class="goto-box">
                <input v-model.number="inputPage" type="number" min="1" :max="totalPages" @keyup.enter="gotoPage">
                <button @click="gotoPage">跳转</button>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
.gov-pagination {
    --gov-primary-color: #1867CA;
    --gov-border-color: #ddd;
    --gov-text-color: #333;

    padding: 2rem 0;
    font-family: 'Source Han Sans CN', sans-serif;

    .pagination {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: flex;
            align-items: center;
        }

        .page-link {
            padding: 0.5rem 1rem;
            border: 1px solid var(--gov-border-color);
            border-radius: 4px;
            text-decoration: none;
            color: var(--gov-text-color);
            transition: all 0.2s ease;
            min-width: 40px;
            text-align: center;
            font-size: 1.2rem;
            display: block;

            &:hover:not(.active, .disabled) {
                //   background: lighten(var(--gov-primary-color), 45%);
                border-color: var(--gov-primary-color);
            }

            &.active {
                background: var(--gov-primary-color);
                color: white;
                border-color: transparent;
                font-weight: 500;
            }

            &.disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        }

        .ellipsis {
            padding: 0 0.5rem;
            color: #666;
        }

        .goto-box {
            margin-left: 1.5rem;
            display: flex;
            gap: 0.5rem;

            input {
                width: 60px;
                padding: 0.6rem;
                border: 1px solid var(--gov-border-color);
                border-radius: 4px;
                text-align: center;
                font-size: 1rem;

                &:focus {
                    outline: 2px solid var(--gov-primary-color);
                    outline-offset: -1px;
                }
            }

            button {
                padding: 0.5rem 1rem;
                background: var(--gov-primary-color);
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 1rem;
                transition: opacity 0.2s;

                &:hover {
                    opacity: 0.9;
                }
            }
        }
    }

    @media (max-width: 768px) {
        .pagination {
            flex-wrap: wrap;
            gap: 0.3rem;
            .page-link {
                padding: 0.3rem 0.8rem;
                min-width: 30px;
            }
            .goto-box {
                display: none;
            }
        }
    }
}
</style>